<template>
    <div class="item" @click="goDetail">
        <img :src="data.images.small" class="img">
        <span class="title">{{data.title}}</span>
        <div class="btm">
            <img class="star"
            :src="item==1?require('../../../assets/images/icon/star.png'):require('../../../assets/images/icon/none-star.png')" 
            v-for="(item,index) of stars" :key="index">
            <span class="rating">{{data.rating.average}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            data:{
                type:Object
            }
        },
        computed:{
            stars(){
                var value = this.data.rating.stars.substring(0,1);
                var arr = [];
                for (var i = 1; i <= 5; i++) {
                    if (i <= value) {
                        arr.push(1)
                    } else {
                        arr.push(0)
                    }
                    }
                 return arr;
            }
        },
        methods:{
            goDetail(){
                this.$router.push(`/moviedetail?id=${this.data.id}`);
            }
        }
    }
</script>

<style lang="less" scoped>
    .item{
        width:100px;
        display: flex;
        flex-direction: column;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        .img{
            width: 100px;
            height: 148px;
        }
        .title{
            font-size: 13px;
            line-height: 25px;
            width: 100px;
        }
    }
    .btm{
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        .rating{
            padding-left: 5px;
            font-size: 12px;
            color: #c20c0c;
        }
        .star{
            width:15px;
            height: 15px;
        }
    }
</style>